<template>
    <div id="drawResList">
        <div style="background-color: white;padding: 10px;">
            <div v-show="usergrade == '1'">
                <el-table border v-show="shengshow" :data="hnsList" style="width: 700px" height="550">
                    <el-table-column prop="ls" label="地市" width="80" />
                    <el-table-column label="县(市、区)" width="180">
                        <template #default="scope">
                            <div style="cursor: pointer;color: #3276b1;" @click="getchild(scope.row)">
                                {{ scope.row.name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cjtz" label="村(居)界调整记录" />
                    <el-table-column prop="qhzy" label="区划转移记录" />
                </el-table>
                <el-button v-show="shishow" @click="backsheng()">返回上级</el-button>
                <el-table v-show="shishow" :data="shilist" style="width: 700px" height="550">
                    <el-table-column type="index" align="center" label="序号" width="80" />
                    <el-table-column prop="name" label="乡镇办事处" width="180" />
                    <el-table-column prop="cjtz" label="村(居)界调整记录" />
                    <el-table-column prop="qhzy" label="区划转移记录" />
                </el-table>
            </div>
            <div v-show="usergrade == '2'">
                <el-table border v-show="shengshow" :data="DJSList" style="width: 700px" height="550">
                    <el-table-column prop="ls" label="地市" width="80" />
                    <el-table-column label="县(市、区)" width="180">
                        <template #default="scope">
                            <div style="cursor: pointer;color: #3276b1;" @click="getchild(scope.row)">
                                {{ scope.row.name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cjtz" label="村(居)界调整记录" width="180" />
                    <el-table-column prop="qhzy" label="区划转移记录" width="180" />
                </el-table>
                <el-button v-show="shishow" @click="backsheng()">返回上级</el-button>
                <el-table v-show="shishow" :data="shilist" style="width: 700px" height="550">
                    <el-table-column type="index" align="center" label="序号" width="80" />
                    <el-table-column prop="name" label="乡镇办事处" width="180" />
                    <el-table-column prop="cjtz" label="村(居)界调整记录" width="180" />
                    <el-table-column prop="qhzy" label="区划转移记录"  />
                </el-table>
            </div>
            <div v-show="usergrade == '3'">
                <el-table :data="tablelist" border style="width: 700px" height="550">
                    <el-table-column type="index" align="center" label="序号" width="80" />
                    <el-table-column prop="name" label="乡镇办事处" width="180" />
                    <el-table-column prop="cjtz" label="村(居)界调整记录" width="180" />
                    <el-table-column prop="qhzy" label="区划转移记录"/>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import $mapreq from '../../api/mapreq';
const usercode = ref('');
const tablelist = ref([]);
const hnsList = ref([]);
const usergrade = ref(localStorage.getItem('grade'));
const shengshow = ref(true);
const shishow = ref(false);
const shilist = ref([]);
onMounted(() => {
    usercode.value = localStorage.getItem('code');
    drawListRes();
});

function backsheng() {
    shengshow.value = true;
    shishow.value = false;
}
function getchild(e) {
    shengshow.value = false;
    shishow.value = true;
    $mapreq.drawResList(e.code).then(res => {
        if (res.code == 200) {
            res.data.forEach((item, index) => {
                if (item.code == e.code) {
                    shilist.value = item.child;
                }
            });
        }
    });
}
const DJSList = ref([]);
function drawListRes() {
    $mapreq.drawResList(usercode.value).then(res => {
        if (res.code == 200) {
            if (usergrade.value == '1') {
                res.data.forEach((item, index) => {
                    item.child[0].ls = item.name;
                    item.child.forEach((child, childind) => {
                        hnsList.value.push(child);
                    });
                });
                console.log(hnsList.value);
            } else if (usergrade.value == '2') {
                res.data.forEach((item, index) => {
                    item.child[0].ls = item.name;
                    item.child.forEach((child, childind) => {
                        DJSList.value.push(child);
                    });
                });
            }
            else {
                res.data.forEach((item, index) => {
                    if (item.code == usercode.value) {
                        tablelist.value = item.child;
                    }
                });
            }
        }
    });
}
</script>

<style scoped lang="less">
#drawResList {
    padding-left: 20px;
    padding-top: 20px;
}
</style>
